<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>炫酷的ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
</head>


<body>

{#{{ df }}#}
{#{{ df.columns[0]  }}#}
{#{{ df1 }}#}
{#{{ df2 }}#}




<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

{#<div id="main2" style="width: 800px;height:500px;margin: 0 auto;"></div>#}

<div id="main1" style="width: 1000px;height:300px;margin: 0 auto;"></div>
{#上涨比率 main2#}
<div id="main2" style="width: 1000px;height:300px;margin: 0 auto;"></div>
{#连板数 main3#}
<div id="main3" style="width: 800px;height:300px;margin: 0 auto;"></div>
<div id="main4" style="width: 800px;height:500px;margin: 0 auto;"></div>
<div id="main5" style="width: 800px;height:500px;margin: 0 auto;"></div>

{#--------------模块1-------------------#}
<script type="text/javascript">
    var df0 = {{ df0|safe }};
    var df1 = {{ df1|safe }};
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '上涨比率',
                    subtext: '20%以下是冰点'
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['上涨比率']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'上涨比率',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df3,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6,
                          markLine: {
                            data: [
                                  {
                                "name": "冰点线",
                                "yAxis": 20,
                                "label": {
                                  "formatter": "{b}",
                                  "position": "end"
                                }
                              },
                              ],
                            label: {
                              distance: [40, 8],
                            }
                          }
                }

            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


{#--------------模块2-------------------#}
<script type="text/javascript">
    var df0 = {{ df0|safe }};
    var df1 = {{ df1|safe }};
    var df2 = {{ df2|safe }};
    {#上涨比率#}
    var df3 = {{ df3|safe }};
    {#连板数#}
    var df4 = {{ df4|safe }};
    {#最高板#}
    var df5 = {{ df5|safe }};

    {#console.log('df1' + df1)#}
    console.log('df2' + df2)
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main3'));
    // 指定图表的配置项和数据
        var   option = {
                title : {
                    text: '上涨比率',
                    subtext: '20%以下是冰点'
                },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['上涨比率']
               {#data:['最高气温','最低气温']#}
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: false, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: false}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    {#data : ['周一','周二','周三','周四','周五','周六','周日']#}
                    data : df0
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        {#formatter: '{value} °C'#}
                        formatter: '{value} '
                    }
                }
            ],
            series : [

                {
                    name:'连板数',
                    type:'line',
                    {#data:[1, -2, 2, 5, 3, 2, 0],#}
                    data:df4,
                    symbolSize: 10, // 设置圆点大小为10
                },

                    {
                          name: 'line',
                          type: 'line',
                          stack: 'all',
                          symbolSize: 6,
                          markLine: {
                            data: [
                                  {
                                "name": "冰点线",
                                "yAxis": 20,
                                "label": {
                                  "formatter": "{b}",
                                  "position": "end"
                                }
                              },
                              ],
                            label: {
                              distance: [40, 8],
                            }
                          }
                }

            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


</body>
</html>



